<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任天堂红色放大按钮</title>
</head>

<body>
    <!--
    按钮来源：https://www.nintendo.com/us/store/products/hollow-knight-silksong-switch/?utm_source=SW&utm_medium=email&utm_campaign=20250911_SW_HollowKnightSilkSong&utm_id=A1011-01
    CSS 动画：https://github.com/IanLunn/Hover/blob/master/css/hover.css
    -->
    <style>
        body {
            max-width: 700px;
            margin: 0 auto;
            padding: 10rem 0;
        }

        body a {
            text-decoration: none;
        }

        .kLesJm {
            margin: 0 2rem;
        }
    </style>

    <div class="kLesJm">
        <div class="kAhEdJ">
            <a class="hkawvn" href="#a">
                <span class="Mc7qX hvr-bounce-in"></span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" role="presentation" alt=""
                    data-testid="DownloadIcon" color="currentColor" size="24">
                    <path
                        d="M4.3 19.4v5.3c0 .5.5.9 1 .9h21.4c.5 0 1-.5 1-.9v-5.3H32v6.3c-.2 2.2-2.1 4-4.4 4H4.2c-2.3 0-4.2-1.8-4.2-4v-6.3h4.3zM17.9 2.2v12.2l5-4.8 2.8 2.8-9.8 9.9L6 12.5l2.6-2.8 5.2 4.8V2.2h4.1z"
                        fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"></path>
                </svg>
                <span class="ZovBS">Direct download</span>
            </a>
        </div>
    </div>
    <style>
        .kLesJm {
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: 1rem;
            align-items: center;
        }

        .kAhEdJ {
            grid-column: span 2;
        }

        /* 修改父元素 .hkawvn 的背景色变化 */
        .hkawvn {
            width: 100%;
            height: 3.5rem;
            align-items: center;
            background-color: #e60012;
            border-radius: 0.375rem;
            color: #ffffff;
            cursor: pointer;
            display: inline-flex;
            font-weight: 600;
            justify-content: center;
            margin: 0;
            position: relative;
            text-align: center;
            white-space: nowrap;
        }

        /*图标*/
        .hkawvn svg {
            margin-left: 0;
            margin-right: 1rem;
            width: auto;
            z-index: 1;
        }

        /* 修改 hover 状态，同时改变父元素背景色 */
        .hkawvn:hover {
            background-color: rgb(172, 0, 13);
            /* 与 .Mc7qX 的 hover 背景色保持一致 */
        }

        .Mc7qX {
            background-color: rgb(230, 0, 18);
            border-color: rgb(230, 0, 18);
            transform: none;
            border: 1px solid #e60012;
            border-radius: .375rem;
            bottom: 0;
            box-sizing: content-box;
            content: "";
            display: block;
            height: calc(100% - 2px);
            left: 0;
            padding: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: calc(100% - 2px);
            /* 修复了原来的计算错误 */
            transition: all 0.3s ease;
            /* 添加过渡效果 */
        }

        .Mc7qX:hover {
            background-color: rgb(172, 0, 13);
            border-color: rgb(172, 0, 13);
        }

        /* Bounce In */
        .hvr-bounce-in {
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
        }

        .hvr-bounce-in:hover,
        .hvr-bounce-in:focus,
        .hvr-bounce-in:active {
            -webkit-transform: scale(1.05);
            transform: scale(1.05);
            -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
            transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
        }




        .ZovBS {
            align-items: center;
            display: flex;
            height: 100%;
            justify-content: center;
            order: 0;
            pointer-events: none;
            z-index: 1;
        }

        @media (min-width: 431px) {
            .hkawvn {
                font-size: 1.3125rem;
                height: 4rem;
                padding: 0 1.5rem;
            }

            .hkawvn>img,
            .hkawvn>svg {
                height: 1.5rem;
            }
        }
    </style>
</body>

</html>